<template>
	<div class="c-image" :style="borderRadius">
		<a href="#">
			<img :src="cm.props.src">
		</a>
	</div>
</template>

<script>
	// 防抖函数
	import {
		debounce
	} from '../utils.js'

	export default {
		name: 'BaseImage',
		props: {
			compid: {
				type: [String, Number],
				required: true
			}
		},
		data() {
			return {
				property_value: this.$store.getters.getCompConfigByCompid(this.compid),
				old_property_val: null
			}
		},
		computed: {
			cm() {
				return this.$store.getters.getCompConfigByCompid(this.compid)
			},
			borderRadius() {
				return {
					borderRadius: this.cm.css.bd.r + 'px'
				}
			}
		},
		watch: {
			property_value: {
				handler(new_val, old_val) {
					this.change_component({
						new_val,
						old_val
					});
				},
				deep: true,
				immediate: true
			}
		},
		methods: {
			change_component: debounce(function(
				params
			) {
				const revoke_state = this.$store.getters.revoke_state
				if (this.old_property_val) {
					// 表示是撤销状态的值的更新
					if (revoke_state) {
						this.$store.commit('REVOKE_STATE', false)
					} else {
						this.$store.commit('ADD_REVOKE_CONTENT', this.old_property_val)
					}
				}
				this.old_property_val = JSON.parse(JSON.stringify(params.new_val))
			}, 300)

		}
	}
</script>
<style lang="scss">
	.c-image {
		a {
			height: 100%;
			display: block;

			img {
				width: 100%;
				height: 100%;
			}
		}
	}
</style>
